/**
 * 能力评估表新增编辑页
 */
import React from 'react';
import { Form, Card, Button, Input, message } from 'antd';
import { useRequest, defaultFormatResult } from '@/hooks';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import pageTabUtil from '@/utils/pageTabUtil';
import { BottomAction } from '@/components';
import { EvaluationTable } from './containers';
import { addEvaluation, updateEvaluation, getEvaluation } from './service';

const Evaluation = ({ form, location }) => {
    const { query } = location;
    const { getFieldDecorator } = form;
    const [formDesc, setFormDesc] = React.useState([]);
    const [isEditing, setIsEditing] = React.useState(false);

    const isAddPage = React.useMemo(() => {
        const { pathname = '' } = location;
        return pathname.includes('add');
    }, [location]);

    // 获取面试评估表
    const { data, loading, run: fetchEvaluation } = useRequest(getEvaluation, {
        manual: true,
        ...defaultFormatResult,
        onSuccess: res => {
            console.log(res);
            if (res?.formItems) {
                setFormDesc(res?.formItems);
            }
        }
    });
    // console.log('🚀 ~ Evaluation ~ data', data);

    // 保存面试评估表
    const { loading: saveLoading, run: saveEvaluation } = useRequest(
        isAddPage ? addEvaluation : param => updateEvaluation({ ...param, id: query?.id }),
        {
            manual: true,
            onSuccess: res => {
                const { code, msg } = res;
                if (code === 10000) {
                    message.success('操作成功');
                    pageTabUtil.goBack();
                    return;
                }
                message.error(msg);
            }
        }
    );

    const handleSubmit = () => {
        form.validateFieldsAndScroll(async (err, values) => {
            if (!err) {
                if (formDesc.length < 1) {
                    message.error('请添加至少一项评估项');
                    return;
                }
                const params = {
                    ...values,
                    formItems: formDesc
                };
                // console.log('🚀 ~ form.validateFieldsAndScroll ~ params', params);
                saveEvaluation(params);
            }
        });
    };

    React.useEffect(() => {
        if (query?.id) {
            fetchEvaluation(query?.id);
        }
    }, [query]);

    return (
        <PageHeaderWrapper>
            <Card
                title={isAddPage ? '新增能力评估表' : '编辑能力评估表'}
                bordered={false}
                loading={loading}
                extra={
                    <BottomAction>
                        <Button onClick={() => pageTabUtil.goBack()} style={{ marginRight: 8 }}>
                            取消
                        </Button>
                        <Button type="primary" disabled={!!isEditing} onClick={handleSubmit} loading={saveLoading}>
                            保存
                        </Button>
                    </BottomAction>
                }
            >
                <Form layout="inline" style={{ marginTop: 24 }}>
                    <Form.Item label="评估表标题" style={{ marginBottom: 24 }}>
                        {getFieldDecorator('formName', {
                            initialValue: data?.formName || '',
                            rules: [
                                {
                                    required: true,
                                    message: '请输入评估表标题'
                                }
                            ]
                        })(<Input placeholder="请输入评估表标题" allowClear maxLength={20} style={{ width: 300 }} />)}
                    </Form.Item>
                </Form>
                <EvaluationTable dataSource={formDesc} onChange={setFormDesc} onEditing={setIsEditing} />
            </Card>
        </PageHeaderWrapper>
    );
};

export default Form.create({})(Evaluation);
